<template>
  <div>
    <div class="coupons-list">
      <dl v-for="(item,index) in couponsList" :key="index" :class="{'notavailable': type == 1 || type == 2}">
        <dt>
          <h2>
            <font>¥</font>{{item.amount_yuan}}
          </h2>
          <h3 class="ellipsis-twoline">{{item.coupon_desc}}</h3>
          <h4>{{item.startTime}}-{{item.endTime}}</h4>
        </dt>
        <dd><span></span>
          <h2>{{item.title}}</h2>
          <h3>{{item.rules_desc}}</h3>
        </dd>
      </dl>
    </div>
    <placeholder :show.sync="isPageEmpty" :message.sync="emptyMsg" :hidBtn="hidBtn" @tryAgain="onTap" :styleTop="44"/>
  </div>
</template>

<script>
  import {formatTime} from '@/utils/index'
  import placeholder from '@/components/placeholder'

  export default {
    props: {
      type: {
        defualt: '0'
      },
      show: {
        defualt: false
      }
    },
    components: {
      placeholder
    },
    data() {
      return {
        noData: false,
        noDataText: '可用',
        isFirst: true,
        couponsList: [],
        isPageEmpty: false,
        hidBtn: false,
        emptyMsg: ''
      }
    },
    watch: {
      show: function (newValue, oldValue) {
        if (newValue && this.isFirst) {
          switch (this.type) {
            case '0':
              this.noDataText = '可用'
              break
            case 1:
              this.noDataText = '已使用'
              break
            case 2:
              this.noDataText = '已过期'
              break
            default:
              this.noDataText = ''
          }
          this.getCoupons()
          this.isFirst = false
        }
      }
    },
    computed: {},
    methods: {
      onTap() {
        this.getCoupons()
      },
      async getCoupons() {
        const data = await this.$fly.post(this.$url.URL_COUPONSlIST, {
          type: this.type
        })
        if (data.successCode) {
          this.couponsList = data.data.coupons
          this.convertTime()
          if (this.couponsList.length <= 0) {
            this.noData = true
            this.isPageEmpty = true
            this.hidBtn = true
            this.emptyMsg = `您暂时还没有(${this.noDataText})优惠券`
          } else {
            this.isPageEmpty = false
          }
        } else {
          this.isPageEmpty = true
          this.hidBtn = false
          this.emptyMsg = data.message
        }
      },
      convertTime() {
        for (let i = 0; i < this.couponsList.length; i++) {
          let item = this.couponsList[i]
          console.log()
          item.startTime = formatTime(new Date(item.start_time * 1000))
          item.endTime = formatTime(new Date(item.end_time * 1000))
        }
      }
    },
    mounted() {
      if (this.show && this.isFirst) {
        this.getCoupons()
        this.isFirst = false
      }
      this.$root.$eventHub.$on('requestPayBack', (target) => {
        this.getCoupons()
      });
    },
    created() {
    }
  }
</script>

<style>
</style>
